<template>
    <div id="retreatTrack">
        <el-card>
            <el-row>
                <el-col :span="20">
                    <div class="grid-content">
                        <el-select class="select-prefix" style="margin-right: 1px;" size="mini" v-model="status" placeholder="请选择审批状态" filterable @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>状态筛选</span>
                            </template>
                            <el-option :value="2" label="全部"></el-option> 
                            <el-option :value="0" label="未完成"></el-option>
                            <el-option :value="1" label="已完成"></el-option>  
                               
                        </el-select>
                        <el-select class="select-prefix" style="margin-right: 1px;" size="mini" v-model="storeNo" v-loadmore="loadMore" placeholder="请选择出库仓库" filterable remote :remote-method="handleChangeSearch" @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>所属仓</span>
                            </template>
                            <el-option v-for="(item, index) in warehouseList" :key="'c'+index" :label="item.warehouseName" :value= "item.warehouseId" ></el-option> 
                        </el-select>
                        <el-date-picker
                        size="mini"
                        v-model="time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="handleChangeSearch"
                        >
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content col_float_right">
                        <el-input size="mini" placeholder="输入单号查询" v-model="searchName" @change="handleChangeSearch"></el-input>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mg-t-10">
            <el-table :data="tableData" border stripe>
                <el-table-column label="退库单号"></el-table-column>
                <el-table-column label="入库仓"></el-table-column>
                <el-table-column label="关联店/仓"></el-table-column>
                <el-table-column label="出库单号"></el-table-column>
                <el-table-column label="入库单号"></el-table-column>
                <el-table-column label="数量"></el-table-column>
                <el-table-column label="类型"></el-table-column>
                <el-table-column label="创建时间"></el-table-column>
                <el-table-column label="入库状态"></el-table-column>
                <el-table-column label="入库时间"></el-table-column>
                <el-table-column label="外部单号"></el-table-column>
                <el-table-column label="操作"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                storeNo: '',
                page: 1,
                size: 10,
                total: 0,
                tableData: [],
                status: 2,
                searchName: '',
                time: [],
                warehousePage: 1,
                warehouseTotal: 0,
                warehouseList: [],
                isNoMore: false
            }
        },
        mounted() {

        },
        created() {
            this.getWarehouseList()
        },
        methods: {
            loadMore() {
                if(!this.isNoMore) {
                    if(this.warehousePage <= Math.ceil(this.warehouseTotal/20)) {
                        this.warehousePage++ ;
                        this.getWarehouseList()
                    }
                }
            },
            /**查询仓库列表 */
            getWarehouseList() {
                let params= {
                    page: this.warehousePage,
                    size: 20,
                    level: '',
                    name: this.name,
                    type: ''
                }
                this.$server.storeWarehouseController.getWarehouseList(params).then(res => {
                    this.warehouseList=this.warehouseList.concat(res.data) 
                    this.warehouseTotal= res.total
                    if(res.data.length > 0 ) {
                        this.isNoMore= false
                    }else{
                        this.isNoMore= true
                    }
                })
            },
            handleChangeSearch() {

            }
        }
    }
</script>